<template>
    <div class="hot">
      <!--轮播图-->
      <div class="swiper-container" v-if="homeCasual.length>0">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(casual,index) in homeCasual" :key="index">
            <img :src="casual.imgurl" style="width: 100%"/>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>

      <!--中间导航-->
      <hot-nav></hot-nav>

      <!--广告位-->
      <div class="hot-ad">
        <img src="./../imgs/hot_ad/home_ad.gif" width="100%"/>
      </div>
      <!--列表-->
      <hot-shop-list></hot-shop-list>
    </div>
</template>

<script>
  import Swiper from 'swiper'
  import 'swiper/dist/css/swiper.min.css'
  import HotNav from './HotNav'
  import HotShopList from './HotShoplist'
  import {
    mapState
  } from 'vuex'
    export default {
      name: "hot",
      components:{
        HotNav,
        HotShopList
      },
      computed:{
        ...mapState(['homeCasual'])
      },
      //请求一般放在mounted
      mounted(){
        //请求轮播图数据
        this.$store.dispatch('reqHomeCasual')

      },
      watch:{
        homeCasual(){
          //在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。
          this.$nextTick(()=>{
            //创建swiper实例
            new Swiper('.swiper-container',{
              loop:true,
              autoplay:true,
              //如果需要分页
              pagination:{
                el:'.swiper-pagination'
              }
            })
          })
        }
      }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  .hot
    width 100%
    height 100%
    padding-top 50px
    background-color #f5f5f5
  .hot-ad
    background-color #fff
    margin 8px 0
    padding 5px
</style>
